<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>进度条 </title>	
	</head>
	<style>
		#progress{
			position: relative;
			margin: auto;
			top: 200px;
			display: block;
			width: 200px;
			height: 20px;
			border-style: dotted;
			border-width: thin;
			border-color: darkgreen;
		}
		#filldiv{
			position:absolute;
			top: 0px;
			left: 0px;
			width: 0px;
			height: 20px;
			background: blue;
		}
		#percent{
			position: absolute;
			top: 0px;
			left: 200px;
			
		}
	</style>
	
	<script>
		
		function jindutiao(){
			var oFilldiv = document.getElementById("filldiv");
			var nPercent = document.getElementById("percent");
			
			var _w = 0;
			
			
			var timer = setInterval(function(){
				_w++;
				oFilldiv.style.width = _w + "px";
				nPercent.innerHTML = parseInt(_w/200*100)+"%";
				
				if(_w == 200) {
					clearInterval(timer);
				}
			}, 50);
		}
		
	</script>
	<body onload="jindutiao()">
		<div id="progress">
			<div id="filldiv"></div>
			<span id="percent">0</span>
		</div>
	</body>
</html>